<template >
  <div class="draw-box">
    <div id="map" ref="mapObj"></div>
  </div>
</template>
<script setup>
import 'ol/ol.css';
import Map from 'ol/Map';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import View from 'ol/View';
import { Vector as VectorSource, OSM } from 'ol/source';
import { Style, Fill, Stroke, Circle as CircleStyle } from 'ol/style';
import { get } from 'ol/proj';

import { onMounted } from 'vue';
import { Draw, Modify, Snap } from 'ol/interaction';

onMounted(() => {
  const extent = get('EPSG:3857').getExtent().slice();
  const map = new Map({
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    target: 'map',
    view: new View({
      center: [0, 0],
      zoom: 2,
      extent
    }),
  });

  const source = new VectorSource();
  const vector = new VectorLayer({
    source: source,
    style: new Style({
      fill: new Fill({
        color: 'rgba(255, 255, 255, 0.2)',
      }),
      stroke: new Stroke({
        color: '#ffcc33',
        width: 2,
      }),
      image: new CircleStyle({
        radius: 7,
        fill: new Fill({
          color: '#ffcc33',
        }),
      }),
    }),
  });

  map.addLayer(vector);

  // const modify = new Modify({ source: source });
  // map.addInteraction(modify);


  let draw, snap; // global so we can remove them later

  function addInteractions() {
    draw = new Draw({
      source: source,
      type: "Polygon",
    });
    map.addInteraction(draw);
    // snap = new Snap({ source: source });
    // map.addInteraction(snap);
  }

  addInteractions();

})



</script>
<style lang="css" scoped>
.draw-box {
  height: 90vh;
}

#map {
  height: 100%;
}
</style>